<template>
  <div id="ListAccount">
    <div class="content">
      <div class="overflow-auto">
        <div class="AccountInfo">
          <div class="CurrentAccount">
            <div class="top">
              <div style="display:inline-block;font-size: 20px;line-height: 20px;">当前账号</div>
              <span class="AccountLv">主账号 </span>
            </div>
            <div class="title">
              <span>账号</span>
              <span>员工姓名</span>
              <span>状态</span>
              <span>操作</span>
            </div>
            <div class="info">
              <span>1323232323</span>
              <span>CEO-李大为 </span>
              <span>启用</span>
              <span>
                <el-button type="text" @click="changePrincipal">
                  更换负责人
                </el-button>
              </span>
            </div>
          </div>
          <div class="AccountSon">
            <div class="top">
              <span>子账号</span>
              <span>可为您的同事开设不同权限的子账号</span>
            </div>
            <div class="search">
              <span class="btn">
                <el-button type="primary">添加子账号</el-button>
              </span>
              <span class="input">
                <el-input v-model="search" placeholder="搜索员工姓名/账号" suffix-icon="el-icon-search">
                </el-input>
              </span>
            </div>
            <div class="table">
              <el-table :data="staffList" :header-cell-style="{ background: '#f6f8ff', color: '#303133' }"
                style="width: 100%;font-weight;:400" height="250">
                <el-table-column fixed prop="username" label="账号">
                </el-table-column>
                <el-table-column prop="nickname" label="员工姓名">
                </el-table-column>
                <el-table-column prop="power" label="权限门店">
                </el-table-column>
                <el-table-column label="状态">
                  <template slot-scope="scope">
                    <div>
                      <el-switch v-model="scope.row.state" inactive-color="#0486FE" active-color="#c0c4cc"></el-switch>
                      <span style="margin-left: 10px;">{{ scope.row.state == 0 ? '停用' : '启用' }}</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" prop="operate">
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleEdit(scope.$index, scope.row)">设置权限
                    </el-button>
                    <el-divider direction="vertical"></el-divider>
                    <el-button size="mini" type="text" @click="handleDelete(scope.$index, scope.row)"
                      style="color: #FF4646;">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script>

export default {
  name: 'ListAccount',
  components: {
  },
  data() {
    return {
      search: '',
      SwitchValue: false,
      tableData: [{
        account: '12312321312',
        name: '财务-王小虎',
        power: '住宿管理，客户管理',
        state: true,
        operate: '上海市普陀区金沙江路 1518 弄',
      }, {
        account: '12312321312',
        name: '财务-王小虎',
        power: '住宿管理，客户管理',
        state: false,
        operate: '上海市普陀区金沙江路 1518 弄',
      }, {
        account: '12312321312',
        name: '财务-王小虎',
        power: '住宿管理，客户管理',
        state: true,
        operate: '上海市普陀区金沙江路 1518 弄',
      }

      ],

      staffList: [],//员工列表
    }
  },
  created() {
    this.getStaff()
  },
  methods: {
    changePrincipal() {
      this.$router.push({ path: '/Settings/ChangeAccount' })
    },
    indexMethod(index) {
      return index * 2;
    },
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    clickSwitch() {
      console.log(123);
    },


    // 获取员工列表
    getStaff() {
      let data = {
        hotel_id: sessionStorage.getItem('hotel_id')
      }
      this.my_request('supplier/hotel-pms-staff', data, 'Get').then(res => {
        console.log(res, '获取员工列表');
        let { code, data } = res.data
        if (200 == code) {
          this.staffList = data
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.el-table__cell>.cell {
  font-weight: 400;
}

.content {
  .overflow-auto {
    width: calc(100% - 190px);
    height: calc(100% - 40px);
    overflow: auto;
    padding: 20px;
  }

  .AccountInfo {
    width: 100%;

    .CurrentAccount {
      background-color: white;
      padding-top: 12px;
      padding-bottom: 12px;
      padding-left: 32px;
      padding-right: 32px;

      .top {
        .AccountLv {
          color: white;
          display: inline-block;
          font-size: 12px;
          width: 37px;
          line-height: 16px;
          height: 16px;
          background: #545454;
          padding: 2px;
          border-radius: 2px;
          margin-left: 10px;
        }
      }

      .title {
        margin-top: 20px;
        // max-width: 1500px;
        background: #f6f8ff;
        font-size: 14px;
        height: 40px;
        line-height: 40px;
        text-align: center;

        display: flex;
        justify-content: space-between;

        span {
          width: 80px;
        }
      }

      .info {
        span {
          width: 80px;
        }

        background: white;
        font-size: 14px;
        text-align: center;
        height: 60px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
      }
    }
  }

  .AccountSon {
    margin-top: 30px;
    padding-top: 12px;
    padding-left: 32px;
    background-color: white;

    .top {
      span:nth-child(2) {
        margin-left: 10px;
        color: #999999;
        font-size: 12px;
      }
    }

    .search {
      margin-bottom: 20px;
      margin-top: 20px;

      .btn {
        display: inline-block;

        .el-button {
          font-size: 12px;
        }
      }

      .input {
        .el-input {
          font-size: 12px;
        }

        margin-left: 20px;
        display: inline-block;
      }
    }
  }
}
</style>
